<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				font-size: 12px;
				
			}

			#container {
				width: 800px;
				margin: 30px auto;
				height: 500px;
				background-color: #00FFFF;
				display: flex;
				flex-direction: column;
			}

			#container #title {
				flex: 0 0 10px;
				margin: 10px;
				line-height: 50px;
				text-align: center;
				font-size: 40px;
			}

			#container #huizong {
				flex: 0 0 45px;
				line-height: 40px;
				background-color: #008000;
			}

			#container #center {
				flex: 1;
				display: flex;
				justify-content: space-around;
				margin: 30px;
				padding: 30px;

			}

			#container #center #zhichu {
				width: 450px;
				background-color: hotpink;
			}

			#container #center table {
				width: 100%;
				border: 1px solid white;
			}
			#container #center table h1{
				padding:5px;
				font-size: 20px;
			}
			#container #center table td{
				border-bottom: white;
				text-align: center;
				height: 30px;
				
			}
			#container table tr:nth-child(odd) {
				background-color: #6495ED;
			}
			
			#container table tr:nth-child(even) {
				background-color: #aaffff;
			}
			
			#container table tbody tr:hover {
				background-color: aqua;
			}
			#container #center #shouru {
				width: 450px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="title">
				当月收入与支出
			</div>
			<div id="center">
				<div id="shouru">
					<table>
						<caption>
							<h1>当月收入情况</h1>
						</caption>
						<thead>
							<tr>
								<td>序号</td>
								<td>类别</td>
								<td>金额</td>
								<td>日期</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td>工资</td>
								<td>9000</td>
								<td>2020-09-01</td>
							</tr>
							<tr>
								<td>1</td>
								<td>工资</td>
								<td>9000</td>
								<td>2020-09-01</td>
							</tr>
							<tr>
								<td>1</td>
								<td>工资</td>
								<td>9000</td>
								<td>2020-09-01</td>
							</tr>
							<tr>
								<td>1</td>
								<td>工资</td>
								<td>9000</td>
								<td>2020-09-01</td>
							</tr>
							<tr>
								<td>1</td>
								<td>工资</td>
								<td>9000</td>
								<td>2020-09-01</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div id="zhichu">
					<table>
						<caption>
							<h1>当月支出情况</h1>
						</caption>
						<thead>
							<tr>
								<td>序号</td>
								<td>类别</td>
								<td>金额</td>
								<td>日期</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td>工资</td>
								<td>9000</td>
								<td>2020-09-01</td>
							</tr>
							<tr>
								<td>1</td>
								<td>工资</td>
								<td>9000</td>
								<td>2020-09-01</td>
							</tr>
							<tr>
								<td>1</td>
								<td>工资</td>
								<td>9000</td>
								<td>2020-09-01</td>
							</tr>
							<tr>
								<td>1</td>
								<td>工资</td>
								<td>9000</td>
								<td>2020-09-01</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div id="huizong">
				总支出200000
			</div>
		</div>
	</body>
</html>
